<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{width: 100px;height: 100px;background: red}
    </style>
</head>
<body>
    <input type="button" id="btn1" value="隐藏">
    <input type="button" id="btn2" value="显示">
    <input type="button" id="btn3" value="隐藏/显示">
    <input type="button" id="btn4" value="上拉">
    <input type="button" id="btn5" value="下拉">
    <input type="button" id="btn6" value="上拉/下拉">
    <input type="button" id="btn7" value="淡出">
    <input type="button" id="btn8" value="淡入">
    <input type="button" id="btn9" value="淡出/淡入">
    <input type="button" id="btn10" value="半透明">
    <div class="box"></div>
</body>
<script src="./jquery.js"></script>
<script>

    // 显示或隐藏
    $("#btn1").click(function(){
        $(".box").hide(1000,function(){
            alert("动画结束了")
        })
    })
    $("#btn2").click(function(){
        $(".box").show(1000)
    })
    $("#btn3").click(function(){
        $(".box").toggle(1000)
    })

    // 上拉或下拉
    $("#btn4").click(function(){
        $(".box").slideUp(1000)
    })
    $("#btn5").click(function(){
        $(".box").slideDown()
    })
    $("#btn6").click(function(){
        $(".box").slideToggle()
    })

    // 淡出或淡入
    $("#btn7").click(function(){
        $(".box").fadeOut(1000)
    })
    $("#btn8").click(function(){
        $(".box").fadeIn()
    })
    $("#btn9").click(function(){
        $(".box").fadeToggle()
    })

    // 半透明
    $("#btn10").click(function(){
        $(".box").fadeTo(500, 0.5)
    })


    

</script>
</html>